<template>
    <el-form id="index1" :model="userData" v-loading.fullscreen.lock="loading">
        <el-form-item id="user">
            <el-input v-model="userData.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item id="pass">
            <el-input :type="showPassType" v-model="userData.password" placeholder="密码">
                <i slot="suffix" class="el-icon-view" @click="showPass()" />
            </el-input>
        </el-form-item>
        <div style="flex:1"></div>
        <el-form-item id="buttonLogin">
            <el-button style="width:120px; margin-top: 8px" type="primary" @click="userLogin()">登录</el-button>
        </el-form-item>
    </el-form>
</template>

<style>
    @import '../css/Login.css';

</style>

<script>
    import userInfo from './UserInfo.vue'

    export default {
        created: function () {
            // 验证会话
            this.$axios({
                method: 'post',
                url: '/session'
            }).then((response) => {
                if (response.status == 200) {
                    if (response.data.status == 0) {
                        userInfo.infoData = response.data.user;
                        userInfo.isLogin = true;
                        
                        this.$router.push({
                            path: 'manage'
                        });
                    }
                }
            }).catch((error) => {
                console.error(error);
            });
        },

        methods: {
            // 显示密码
            showPass: function showPass() {
                if (this.showPassType === 'password') {
                    this.showPassType = 'text';
                } else {
                    this.showPassType = 'password';
                }
            },

            // 登陆
            userLogin: function userLogin() {
                this.loading = true;
                let message = '';

                if (this.userData.username.length == 0) {
                    message += '请输入用户名！\n';
                }

                if (this.userData.password.length == 0) {
                    message += '请输入密码！\n';
                }

                if (message.length != 0) {
                    this.$message({
                        title: '警告',
                        message: message,
                        type: 'warning'
                    });
                    this.loading = false;
                    return;
                }

                // 登陆发送
                this.$axios({
                    method: 'post',
                    url: '/login',
                    data: {
                        username: this.userData.username,
                        password: this.userData.password
                    }
                }).then((response) => {
                    if (response.status == 200) {
                        switch (response.data.status) {
                            case 0:
                                this.$router.push({
                                    path: 'manage'
                                });
                                break;

                            case 1:
                                this.$message({
                                    title: '警告',
                                    message: '密码错误',
                                    type: 'warning'
                                });
                                break;

                            case 2:
                                this.$message({
                                    title: '警告',
                                    message: '无此用户',
                                    type: 'warning'
                                });
                                break;

                            default:
                                break;
                        }
                    }
                }).catch((error) => {
                    console.error(error);
                    this.loading = false;
                    return;
                });

                this.loading = false;
                // this.userData.password = '';
            }

        },

        data() {
            return {
                loading: false,
                showPassType: 'password',

                userData: {
                    username: '',
                    password: '',
                }
            }
        }
    };

</script>

